<template>
  
  <div>
    <el-text>PDF边距设置：</el-text>
    <el-text>上边距</el-text>
    <el-input type="number" v-model="input1" style="width: 100px" placeholder="20" @input="onInput" />
    <el-text>左边距</el-text>
    <el-input type="number" v-model="input2" style="width: 100px" placeholder="20" @input="onInput" />
    <el-text>下边距</el-text>
    <el-input type="number" v-model="input3" style="width: 100px" placeholder="20" @input="onInput" />
    <el-text>右边距</el-text>
    <el-input type="number" v-model="input4" style="width: 100px" placeholder="20" @input="onInput" />
    <el-button  @click="onSet">
      点击设置
    </el-button>
    <el-text>{{ set }}</el-text>
  </div>
  
  <div style="height: 20px;"></div>

  <form action="http://192.168.2.27:3002/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="myFile">
    <input type="submit" value="Upload File" @click="onClick">
  </form>
  <div style="height: 20px;"></div>
  <div>正在解析中。。。{{ process }}</div>
  <el-button v-if="canload" @click="downloadFile">
    点击下载
  </el-button>
</template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import type { UploadInstance, ElMessage } from 'element-plus'
  
  const uploadRef = ref<UploadInstance>();
  const process = ref('');
  const canload = ref(false);
  const input1 = ref(20);
  const input2 = ref(20);
  const input3 = ref(20);
  const input4 = ref(20);
  const set = ref('');

  function onInput(e:any){

  }
  var tid = 0;
  // 创建一个新的XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
    
  const submitUpload = () => {
    uploadRef.value!.submit();

    
  }
  function onClick(){
    tid = setInterval(reqProcess, 1000);
  }
  function reqProcess(){
    console.log("了深度可达三十多了")
    // 打开一个到服务器的GET请求
    xhr.open('GET', 'http://192.168.2.27:3002/process', true);
      
    // 设置请求完成的处理函数
    xhr.onreadystatechange = function() {
        // 请求完成并且响应状态码为200
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                // 请求成功，处理响应数据
                let str:string = xhr.responseText;
                var arr = str.split("/");
                if(parseInt(arr[0]) >= parseInt(arr[1]) && arr[2] == "zip is ok"){
                  canload.value = true;
                  clearInterval(tid);
                }
                console.log(xhr.responseText);
                process.value = xhr.responseText;
            } else {
                // 请求出错，处理错误情况
                console.error('There was a problem with the request.');
            }
        }
    };
      
    // 发送请求
    xhr.send();
  }

  function downloadFile() {
    fetch('http://192.168.2.27:3002/download')
      .then(response => response.blob())
      .then(blob => {
        const url = window.URL.createObjectURL(new Blob([blob]));
        const a = document.createElement('a');
        a.href = url;
        a.download = Date.now() + 'file.zip';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
      })
      .catch(error => console.error('Error downloading file:', error));
  }
  function onSet(){
    xhr.open('GET', 'http://192.168.2.27:3002/set?top='+input1.value+'&left='+input2.value+'&bottom='+input3.value+'&right='+input4.value+'', true);
      
    // 设置请求完成的处理函数
    xhr.onreadystatechange = function() {
        // 请求完成并且响应状态码为200
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                // 请求成功，处理响应数据
                console.log(xhr.responseText);
                set.value = xhr.responseText;
            } else {
                // 请求出错，处理错误情况
                console.error('There was a problem with the request.');
            }
        }
    };
      
    // 发送请求
    xhr.send();
  }


 


  </script>
  